<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级成绩管理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        button {
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>班级成绩管理</h2>
        <input type="text" v-model="newStudent.name" placeholder="学生姓名">
        <input type="number" v-model.number="newStudent.score" placeholder="学生成绩">
        <button @click="addStudent">增加学生</button>
        <button @click="sortStudents(true)">按成绩倒序</button>
        <button @click="sortStudents(false)">按成绩正序</button>
        <button @click="filterStudents('pass')">筛选及格</button>
        <button @click="filterStudents('fail')">筛选不及格</button>
        <button @click="filterStudents('all')">显示全部</button>
        <input type="text" v-model="searchName" placeholder="按名称搜索">
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(student, index) in filteredStudents" :key="index">
                    <td>{{ student.name }}</td>
                    <td>{{ student.score }}</td>
                    <td>
                        <button @click="editStudent(index)">修改</button>
                        <button @click="deleteStudent(index)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <p>总分: {{ totalScore }}</p>
        <p>平均分: {{ averageScore }}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                students: [
                    { name: '张三', score: 10 },
                    { name: '李四', score: 90 },
                    { name: '王五', score: 80 }
                ],
                newStudent: {
                    name: '',
                    score: 0
                },
                searchName: '',
                filterType: 'all'
            },
            computed: {
                totalScore() {
                    return this.filteredStudents.reduce((sum, student) => sum + student.score, 0);
                },
                averageScore() {
                    return this.filteredStudents.length > 0? this.totalScore / this.filteredStudents.length : 0;
                },
                filteredStudents() {
                    let filtered = this.students;
                    if (this.searchName) {
                        filtered = filtered.filter(student => student.name.indexOf(this.searchName)!== -1);
                    }
                    if (this.filterType === 'pass') {
                        filtered = filtered.filter(student => student.score >= 60);
                    } else if (this.filterType === 'fail') {
                        filtered = filtered.filter(student => student.score < 60);
                    }
                    return filtered;
                }
            },
            methods: {
                addStudent() {
                    if (this.newStudent.name && this.newStudent.score!== undefined) {
                        this.students.push({...this.newStudent });
                        this.newStudent = {
                            name: '',
                            score: 0
                        };
                    }
                },
                deleteStudent(index) {
                    this.students.splice(index, 1);
                },
                editStudent(index) {
                    const newScore = prompt('请输入新成绩', this.students[index].score);
                    if (newScore!== null) {
                        this.students[index].score = parseInt(newScore);
                    }
                },
                sortStudents(isDescending) {
                    this.students.sort((a, b) => (isDescending? b.score - a.score : a.score - b.score));
                },
                filterStudents(type) {
                    this.filterType = type;
                }
            }
        });
    </script>
</body>

</html>